<template>
  <div id='cart'>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">购物车</el-breadcrumb-item>
    </el-breadcrumb>
    <el-table :data="cartProducts">
      <el-table-column width="55">
        <el-checkbox
          slot="header"
          size="mini"
          v-model="checkedAll"
        >
        </el-checkbox>
        <template slot-scope="scope">
          <el-checkbox
            size="mini"
            :value="scope.row.isChecked"
            @change="updateProductChecked({
              prodId: scope.row.id,
              checked: $event
            })"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        label="商品"
        prop="title"
      ></el-table-column>
      <el-table-column
        label="单价"
        prop="price"
      ></el-table-column>
      <el-table-column
        label="数量"
        prop="count"
      >
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.count"
            size="small"
            @change="updateProductCount({
              prodId: scope.row.id,
              count: $event
            })"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        label="小计"
        prop="totalPirce"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="danger"
            @click="deleteFromCart(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <p>
      已选 <span class="fnt">{{ checkedTotalCount }} </span>件商品，总价：<span class="fnt">{{ chenckedTotolPrice }}</span>
    </p>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapState } from 'vuex' 
export default {
  name: 'cart',
  data() {
    return {
    }
  },

  computed: {
    ...mapState('cart', ['cartProducts']),
    ...mapGetters('cart', ['checkedTotalCount', 'chenckedTotolPrice']),
    checkedAll: {
      get () {
        if (this.cartProducts.length === 0) {
          return false
        }
        return this.cartProducts.every(prod => prod.isChecked)
      },
      set (value) {
        this.updateAllProductsChecked(value)
      }
    }
  },

  methods: {
    ...mapMutations('cart', [
      'updateProductChecked',
      'updateAllProductsChecked',
      'updateProductCount',
      "deleteFromCart"
    ])
  }
}
</script>
<style scoped>
.fnt {
  font-weight: 500;
  color: red;
}
</style>